
/*
 * 1. data생성하기.
 * 2. 모델 생성하기.
 * 3. 스토어 생성후 data를  store에 연결.
 * 4. 리스트 생성하기.
 * 5. Panel에 리스트 추가하기.
 */

Ext.setup({
	tabletStartupScreen:"images/tabletStartupScreen.png",
	phoneStartupScreen:"images/phoneStartupScreen.png",
	tabletIcon:"images/tabletIcon.png",
	phoneIcon:"images/phoneIcon.png",
	glossOnIcon: true,
	statusBarStyle:"black",
	fullscreen:true,
	preloadImages:[],
	scope:this,
	onReady: function() {
	/*
	 * 1. data생성하기.
	 */
		var initData = function() {
			var data= new Array();
			for(var i = 0; i < 100; i++) {
				var item        ={};
				var strIndex	= String.fromCharCode(97 + (Math.random() * 24));
				item["name"]	= strIndex + "_name_" + i;
				item["url"]		= "images/" + (1 + (i % 10)) + ".gif";
				item["size"]	= Math.floor(Math.random() * 1000);
				data.push(item);
			}
			return data;
		};
		var objData = initData();
		/*
		 * 2. 모델 생성하기.
		 */
		Ext.regModel('mydata', {
			fields: ['name', 'url', 'size','lastmod']
		});
		/*
		 * 3. 스토어 생성후 data를 store에 연결.
		 */
		var objStore = new Ext.data.Store({
			model: 'mydata',
			sorters: 'name',
			data: objData,
			// 그룹 스트링.
			getGroupString : function(record) {
				return record.get('name')[0];
			},
		});
		/*
		 * 4.리스트 생성하기.
		 */
		var objList= new Ext.List({        
			store: objStore,
			grouped: true,
			indexBar:true,
			selectedItemCls:"x-list-over",
			// 아이템 템플릿
			itemTpl: '<div class="contact">name : <strong>{name}</strong>, size : {size}, <br/><img width="24" src="{url}" title="{name}" class="image"></div>'
		});
		/*
		 * 5. Panel에 리스트 추가하기.
		 */
		new Ext.Panel({
			fullscreen: true,  
			scroll:"vertical",
			layout:"fit",
			items:objList,
			dockedItems: [ {
				dock : 'top',
				xtype: 'toolbar',
				title: 'List Grouped Sample'
			} ]
		})
	}
});